<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font_home/iconfont.css">
    <link rel="stylesheet" href="./font/iconfont.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        header>a{
            font-size: 25px;
            text-align: center;
            line-height: 40px;
            margin-left: 10px;
            text-decoration: none;
            color: #000;

        }
        header{
            width: 1000px;
            height: 40px;
            position: relative;
            border: 2px solid #000;
            border-radius: 10px;
            margin: auto;
            line-height: 40px;
        }
        section{
            width: 1000px;
            /* height: 600px; */
            border: 2px solid #000;
            border-radius: 10px;
            margin: auto;
        }
        section>img{
            vertical-align: bottom;
        }
        section>h1{
            width: 100%;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background-color: #b9afaf88;
            font-weight: normal;

        }
        section>article{
            width: 100%;
            height: 400px;
            display: flex;
            border-radius: 10px;
            justify-content: space-evenly;
            align-items: center;
            position: relative;
        }
        section>article>img{
            width: 300px;
            height: 300px;
            margin-left: 10px;
            margin-right: 40px;
        }
        section>article>span{
            display: inline-block;
            width: 60px;
            height: 60px;
            text-align: center;
            line-height: 60px;
            font-size: 20px;
            font-family: 'Courier New', Courier, monospace;
            background-color: tomato;
            color: #fff;
            border-radius: 50%;
            position: absolute;
            transform: rotate(-30deg);
            top: 50px;
            left: 20px;
        }
        section>article>div{
            height: 100%;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: start;
            align-items: start;
        }
        section>article>div>h1{
            margin-top: 40px;
            font-size: 25px;
            font-weight: 600;
            margin-bottom: 40px;
        }
        section>article>div>span{
            font-size: 20px;
            color: red;

        }
        section>article>div>button{
            margin-top: 60px;
            width: 200px;
            font-size: 25px;
            border: 0;
            border-radius: 10px;
            background-color: darkorange;
            color: #fff;
            height: 90px;
        }
        header::after{
            font-size: 25px;
            float: right;
            margin-right: 20px;
        }
        header>span{
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: rgba(255, 0, 89, 0.9);
            position: absolute;
            right: 15px;
            top: 5px;
            text-align: center;
            color: #000;
            line-height: 20px;
            margin: 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <header class="iconfont icon-gouwuche"><a href="./index.html" class="iconfont icon-home">主页</a><span></span></header>
    <section>
<!--         <div>
            <img src="" alt="">
            <div></div>
            <span></span>
        </div> -->
    </section>
</body>
<script src="./axios.js"></script>
<script src="./detail.js"></script>
</html>